<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Free HTML5 Template by FreeHTML5.co" />
	<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />


	<title>Bootstrap blog template</title>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="asset/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="asset/css/style.css" type="text/css">
	<link rel="stylesheet" href="asset/css/animate.css" >
	<!-- Modernizr JS -->
	<script src="asset/js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="asset/js/respond.min.js"></script>
	<![endif]-->
	<script src="asset/js/canvas2image.js" type="text/javascript" charset="utf-8"></script>
</head>
<body onload="loadCata();">

	<div class="container">
		<div class="row">
			<div class="col-md-4 col-md-offset-4">  					
  			</div>
  		</div>
		<div class="row">
			<div class="col-md-4 col-md-offset-4 ">
				<p class="center">
					^_^
  				</p>
  			</div>
		</div>
					<!-- Start Sign In Form -->
		<form action="portfolio.html">
			<div class="row">
				<div class=" col-md-6 col-md-offset-3">
					<h2>添加目录</h2>	
				</div>
			</div>
			<div class="row">
				<div class=" col-md-6 col-md-offset-3">
					<div class="form-group">
					<label for="list_l" class="col-sm-1 control-label">在</label>
    					<div class="input-group col-md-9">
      						<input id="Cata_now" type="text" class="form-control " placeholder="DAM">
     						<div class="input-group-btn">
      							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">目录选择 <span class="caret"></span></button>
        						<ul id = "cata" class="dropdown-menu dropdown-menu-right">
        							<!--这里会动态添加目录-->
        						</ul>
      						</div><!-- /btn-group -->
      						<label for="list_l" class="control-label">下添加</label>
    					</div><!-- /input-group -->
					<div>



					<div class="form-group" >
						<label for="Cname_l" class="col-sm-3 control-label">目录名</label>
						 <input type="text" class="form-control col-sm-3" id="Cname_message" placeholder="新建的目录名字">
					</div>
					<div class="form-group">
						<label for="remember">
							<input type="checkbox" id="contract">作为父目录
							<p>父目录下不能放文件，非父目录下不能新增目录</p>
						</label>
					</div>
					<div class="form-group">
						
    					<div class="input-group">
    						<label for="sort_l" class="col-sm-3 control-label">文件类型</label>
      						<input id="Cata_now2" type="text" class="form-control col-sm-6" placeholder="PNG">
     						<div class="input-group-btn">
      							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">类型 <span class="caret"></span></button>
        						<ul id = "Cata_a" class="dropdown-menu dropdown-menu-right">
        							<li><a onclick="changeCata2(this.innerHTML);">PNG</a></li>
        							<li><a onclick="changeCata2(this.innerHTML);">JPG</a></li>
        							<li><a onclick="changeCata2(this.innerHTML);">Other</a></li>
        						</ul>
      						</div><!-- /btn-group -->
    					</div><!-- /input-group -->
    				</div>
    			</div>
			</div>
			<div class="row">
					<div class="row col-md-6 col-md-offset-3">
						<div class="form-group ">
							<button  onclick="form.submit();" class = "btn-primary"></button>
						<!--<input type="submit" value=" " class="btn-primary">-->
						</div>
					</div>
			</div>
		</form>
					<!-- END Sign In Form -->
			</div>
		</div>
	</div>
	
	<script>
		function loadCata()//动态生成下拉菜单中的目录选项
		{
			var Cata = new Array();//在这个需要后端传递数据替换
			Cata[0]="A1"
			Cata[1]="A2"
			Cata[2]="A3"
			Cata[3]="-"//代表分界线
			Cata[4]="P1"
			for(var i=0; i < 5;i++){
				var node=document.createElement("LI");
				var Cata_a=document.createElement("A");
				if(Cata[i]!="-"){
					Cata_a.innerHTML=Cata[i];
					Cata_a.setAttribute( 'onclick', "changeCata(this.innerHTML);");
				}
				else{
					node.setAttribute( 'class', "divider");
					node.setAttribute( 'role', "separator");
				}
				node.appendChild(Cata_a);				
				document.getElementById("cata").appendChild(node);
			}

		}
		function changeCata(name){
			document.getElementById("Cata_now").setAttribute('placeholder',name);
		}
		function changeCata2(name){
			document.getElementById("Cata_now2").setAttribute('placeholder',name);
		}
    </script>
	<script src="asset/js/jquery.min.js"></script>
	<script src="asset/bootstrap/js/bootstrap.min.js"></script>
	<!-- Placeholder -->
	<script src="asset/js/jquery.placeholder.min.js"></script>
	<!-- Waypoints -->
	<script src="asset/js/jquery.waypoints.min.js"></script>
	<!-- Main JS -->
	<script src="asset/js/main.js"></script>
 
</body>
</html>
